<template>

   <!-- 头部部分 -->
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" 
      v-model.trim="taskname"
      @change.enter="Add"
      placeholder="请输入任务名称" autofocus />
    </header>

</template>

<script>
export default {
  data(){
    return {
      taskname:''
    }
  },
  methods:{
    Add(){
      //0.非空效验
      if(this.taskname === '') return
      //1.用户按下回车时获取到用户输入的任务名
      // console.log(this.taskname);
      // 2.将任务名传递给父组件 子传父 
      this.$emit('addTask', this.taskname);
      // 3.父组件接收任务名后加入数组 
      // 4.情况文本框 
      this.taskname = ''
    }
  }
};
</script>

<style lang="scss" scoped>

</style>